<template>
  <div class="warning_container">
    <!-- 标题 -->
    <div class="top_box">
      <span class="warning_title">报 警 信 息</span>
      <!-- <span class="open_warning_details" @click="openWarningDetails"
        >查看详情</span
      > -->
    </div>
    <!-- 内容 -->
    <div class="warning_content">
      <div class="warning_contents">
        <el-table
          :data="warningData"
          border
          fit
          highlight-current-row
          @row-contextmenu="rowContextmenu"
          @row-dblclick="dblClickRow"
        >
          <!-- {"ID":35524,"VID":15062,"LICENSE_PLATE":"津CA5151(张贵庄)","SIMCARD_NO":"064882278979","TYPE":2,"TIME":"2021-05-25T11:42:50","LONGITUDE":117.34970283267484,"LATITUDE":39.079138445187745,"SPEED":0.0,"FLENGTH":null,"FOFFSET":null,"FPATH":null,"cmsserver":null} -->
          <el-table-column
            prop="NAME"
            label="名称"
            min-width="25%"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="TYPENAME"
            label="报警类型"
            min-width="30%"
            align="center"
          ></el-table-column>
          <el-table-column
            sortable
            prop="TIME"
            label="报警时间"
            min-width="45%"
            align="center"
          ></el-table-column>
          <!-- <el-table-column prop="LONGITUDE" label="经度" align="center" width="120" :formatter="formatter"></el-table-column> -->
          <!-- <el-table-column prop="LATITUDE" label="纬度" align="center" width="120" :formatter="formatter"></el-table-column> -->
        </el-table>
      </div>
      <el-dialog
        title="报警信息详情"
        :visible.sync="showDetailDialogVisible"
        width="80%"
      >
        <div>
          <el-row :gutter="12">
            <el-col :span="6">
              <el-form ref="form" :model="form">
                <el-form-item label="开始日期：">
                  <el-date-picker
                    v-model="form.StartDate"
                    type="date"
                    placeholder="选择日期"
                    value-format="yyyy-MM-dd"
                  ></el-date-picker>
                </el-form-item>
                <el-form-item label="结束日期：">
                  <el-date-picker
                    v-model="form.EndDate"
                    type="date"
                    placeholder="选择日期"
                    value-format="yyyy-MM-dd"
                  ></el-date-picker>
                </el-form-item>
              </el-form>
            </el-col>
            <el-col :span="6">
              <el-form ref="form" :model="form">
                <el-form-item label="分组：">
                  <el-select
                    v-model="form.groupingValue"
                    placeholder="请选择分组"
                    @change="getWorkerlist"
                    clearable
                  >
                    <el-option
                      v-for="(item, index) in form.groupingList"
                      :value="item.CLIENT_NO"
                      :label="item.CLIENT_NAME"
                      :key="index"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="姓名：">
                  <el-input v-model="form.workerValue" style="width: 207px;"></el-input>
                  <!-- <el-select
                    v-model="form.workerValue"
                    placeholder="请选择"
                    filterable
                    clearable
                  >
                    <el-option
                      v-for="item in form.workerList"
                      :key="item.index"
                      :label="item.NAME"
                      :value="item.NAME"
                    ></el-option>
                  </el-select> -->
                </el-form-item>
              </el-form>
            </el-col>
            <el-col :span="6">
              <el-form ref="form" :model="form">
                <el-form-item label="报警类型：">
                  <el-select v-model="form.alermTypeValue" placeholder="请选择">
                    <el-option
                      v-for="item in form.alermTypeList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <!-- <el-form-item label="处理状态：">
              <el-select v-model="form.cph" placeholder="请选择">
                <el-option
                  v-for="item in form.cphList"
                  :key="item.index"
                  :label="item.LicensePlate"
                  :value="item.LicensePlate"
                ></el-option>
              </el-select>
            </el-form-item> -->
              </el-form>
            </el-col>
            <el-col :span="6">
              <el-form ref="form" :model="form" style="float: right">
                <el-button
                  size="mini"
                  type="primary"
                  @click="getWarningDetailList"
                  >查 询</el-button
                >
                <el-button size="mini" type="success" @click="exportExcel"
                  >导 出</el-button
                >
              </el-form>
            </el-col>
          </el-row>
        </div>
        <el-table
          v-loading="loading"
          :data="
            tableData.slice(
              (currentPage - 1) * pageSize,
              currentPage * pageSize
            )
          "
        >
          <el-table-column
            prop="报警人员"
            label="报警人员"
            align="center"
            width="100"
          ></el-table-column>
          <el-table-column
            prop="人员类型"
            label="人员类型"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="所属清扫队"
            label="所属清扫队"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="所属班组"
            label="所属班组"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="报警类型"
            label="报警类型"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="报警时间"
            label="报警时间"
            align="center"
             width="150"
          ></el-table-column>
          <el-table-column
            prop="滞留时间"
            label="滞留时间"
            align="center"
            width="150"
          ></el-table-column>
 
          <!-- <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <el-button type="text" icon="el-icon-info" @click="handleEdit(scope.$index, scope.row)">详情</el-button>
        </template>
      </el-table-column>-->
        </el-table>
        <div class="pagination">
          <el-pagination
            background
            layout="total, sizes, prev, pager, next, jumper"
            :current-page="currentPage"
            :page-size="pageSize"
            :total="tableData.length"
            @size-change="handleSizeChange"
            @current-change="handlePageChange"
          ></el-pagination>
        </div>
      </el-dialog>
    </div>

    <div
      class="rowContextmenu"
      v-if="rowMenu.isShow"
      :style="`top: ${rowMenu.top}px; left: ${rowMenu.left}px`"
    >
      <span @click="exportExcel1">导出Excel</span>
      <span>解除报警</span>
      <span>删除图标</span>
    </div>
  </div>
</template>

<script>
import eventBus from '@/eventBus.js'
import '@/assets/css/common.css'
import export2Excel from '@/utils/exportExcel/index.js'
import { formatDate } from '@/common/js/date.js'
export default {
  data () {
    return {
      warningData: [],
      warningDetailList: [],
      rowMenu: {
        top: 0,
        left: 0,
        isShow: false
      },
      row: null,
      personWarning: null,
      dialogFormVisiblePayment: false,
      formLabelWidth: "100px",

      // 报警详情窗口
      showDetailDialogVisible: false,
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页的数据条数
      loading: false,
      originalData: [],
      tableData: [],
      form: {
        groupingList: [],
        groupingValue: '',
        workerList: [],//车牌号列表
        workerValue: '',//车牌号
        alermTypeList: [{ label: '全部', value: '0' }, 
        { label: 'SOS报警', value: '1' }, 
        { label: '滞留报警', value: '3' }, 
        { label: '设备关机报警', value: '11' }, 
        { label: '设备电量过低报警', value: '12' }],

        alermTypeValue: '0', 
        StartDate: formatDate(new Date(new Date() - 3600 * 1000 * 24), 'yyyy-MM-dd'),
        EndDate: formatDate(new Date(), 'yyyy-MM-dd'),
      },
    }
  },
  mounted () {
    this.getWarningList()
    this.getGroupingList()
  },
  methods: {
    // 报警信息
    async getWarningList () {
      var url = 'DataListCompany/GetCleanerAlarmBDEListApi?ClientNo=' + localStorage.getItem('CLIENT_NO')
      const { data } = await this.$Http.get(url)
      // data.slice(0,20)
      var points = [];  // 添加海量点数据
      var pointsDict = {};
      data.forEach(element => {
        points.push(new BMap.Point(element.LONGITUDE, element.LATITUDE));
        pointsDict[element.LONGITUDE] = element
        element.TYPE = element.ALARM_TYPE
        element.TIME = element.ALARM_DATE.replace('T', ' ')
        switch (element.TYPE) {
          case 1:
            element.TYPENAME = "作业量不足";
            break;
          case 2:
            element.TYPENAME = "作业量不足";
            break;
          case 3:
            element.TYPENAME = "违规滞留";
            break;
          case 4:
            element.TYPENAME = "违规脱岗";
            break;
          case 5:
            element.TYPENAME = "异常离线";
            break;
          case 6:
            element.TYPENAME = "异常离线";
            break;
          case 8:
            element.TYPENAME = "作业量不足";
            break;
          case 11:
            element.TYPENAME = "迟到管理";
            break;
          case 12:
            element.TYPENAME = "作业量不足";
            break;
          default:
            element.TYPE = 1;
            element.TYPENAME = "迟到管理";
            break;
        }
      });
      this.warningData = data
      eventBus.$emit('mapDataAlert', data)
      // eventBus.$emit('mapPointsCollection_SEA_Alert', points)

    },
    // 报警详情信息
    async getWarningDetailList () {
      // async getlistdata () {
      this.loading = true
      //  BEGINDATE, string ENDDATE, string CLIENT_NO, string TYPE, string NAME)
      var url = 'DataListCompany/GetCleanerAlarmBDEDetailListApi?CLIENT_NO=' + this.form.groupingValue
      + '&BEGINDATE=' + this.form.StartDate+ '&ENDDATE=' + this.form.EndDate+ '&NAME=' + this.form.workerValue+ '&TYPE=' + this.form.alermTypeValue
      // var url = '/DataListCompany/GetCleanerAlarmBDEDetailListApi?ClientNo=' + localStorage.getItem('CLIENT_NO')
      const { data } = await this.$Http.get(url)
      this.tableData = data;
      this.loading = false;
      // data.forEach(element => {
      //   // points.push(new BMap.Point(element.LONGITUDE, element.LATITUDE));
      //   // pointsDict[element.LONGITUDE] = element
      //   element.TYPE = element.ALARM_TYPE
      //   element.TIME = element.ALARM_DATE.replace('T', ' ')
      //   switch (element.TYPE) {
      //     case 1:
      //       element.TYPENAME = "SOS报警";
      //       break;
      //     case 2:
      //       element.TYPENAME = "心率异常报警";
      //       break;
      //     case 3:
      //       element.TYPENAME = "滞留报警";
      //       break;
      //     case 4:
      //       element.TYPENAME = "脱岗报警";
      //       break;
      //     case 5:
      //       element.TYPENAME = "离线报警";
      //       break;
      //     case 6:
      //       element.TYPENAME = "GPS设备异常报警";
      //       break;
      //     case 7:
      //       element.TYPENAME = "心率异常报警";
      //       break;
      //     case 8:
      //       element.TYPENAME = "血压异常报警";
      //       break;
      //     case 11:
      //       element.TYPENAME = "设备关机报警";
      //       break;
      //     case 12:
      //       element.TYPENAME = "设备电量过低报警";
      //       break;
      //     default:
      //       element.TYPENAME = "未定义报警类型";
      //       break;
      //   }
      // });
      // // 原始数据
      // this.originalData = data
      // // console.log(data)
      // this.loading = false
      // this.personQuery()
    },

    // 筛选报警详情列表
    // personQuery () {
    //   this.currentPage = 1;
    //   this.tableData = this.originalData
    //   console.log(this.tableData)
    //   // const { name, client } = this.form
    //   if (this.form.workerValue != '') this.tableData = this.tableData.filter(item => item.NAME.includes(this.form.workerValue))

    //   console.log(this.form.workerValue)
    //   console.log(this.tableData)
    //   if (this.form.groupingValue != '') this.tableData = this.tableData.filter(item => item.CLIENT_NO.includes(this.form.groupingValue))
    //   console.log(this.form.groupingValue)
    //   console.log(this.tableData)
    //   if (this.form.alermTypeValue != '全部') this.tableData = this.tableData.filter(item => this.form.alermTypeValue === item.TYPENAME)
    //   console.log(this.form.alermTypeValue)
    //   console.log(this.tableData)
    // },
    // 获得人员分组列表
    async getGroupingList () {
      // var url = 'Worker/GetGroupList?ClientNo=' + localStorage.getItem('CLIENT_NO') // zxdata
      var url = 'DataListCompany/GetCleanerGroupListApi?ClientNo=' + localStorage.getItem('CLIENT_NO')
      let { data } = await this.$Http.get(url)
      this.form.groupingList = data
      this.form.groupingValue = data[0].CLIENT_NO
    },
    // 获得人员信息列表
    async getWorkerlist () {
      this.form.workerValue = ''
      var url = 'DataListCompany/GetWorkerListApi?ClientNo=' + this.form.groupingValue
      const { data } = await this.$Http.get(url)
      this.form.workerList = data
    },
    // 打开报警详情
    openWarningDetails () {
      this.showDetailDialogVisible = true
      this.getWarningDetailList()
      // eventBus.$emit('warningDetails', true)
    },
    // 右键某一行
    rowContextmenu (row, column, event) {
      this.row = row
      window.event.returnValue = false
      this.rowMenu.isShow = true
      this.rowMenu.top = event.clientY
      this.rowMenu.left = event.clientX
      const x = document.body.clientWidth - event.clientX
      if (x < 100) this.rowMenu.left = event.clientX - 100
    },
    // 双击某一行
    dblClickRow (row, column, event) {
      eventBus.$emit('warningItem', row)
      // this.getWarningDetail(row.ID, row.LONGITUDE, row.LATITUDE)
    },
    // 报警详情信息
    // async getWarningDetail (alarmID, alarmLON, alarmLAT) {
    //   var url = '/DataListCompany/GetVehicleAlarmDetailCCApi?CLIENT_NO=' + localStorage.getItem('CLIENT_NO') + '&NUM=100&ID=' + alarmID
    //   const { data } = await this.$Http.get(url)
    //   const val = data[0]
    //   val["LONGITUDE"] = alarmLON
    //   val["LATITUDE"] = alarmLAT
    //   eventBus.$emit('warningItem', val)
    // },
    // 导出Excel
    exportExcel1 () {
      this.rowMenu.isShow = false
      const excelName = this.row.NAME + '-报警信息'
      const tHeader = ['姓名', '报警类型', '报警位置', '报警时间', '经度', '纬度']
      const filterVal = ['NAME', 'ALARM_TYPE', '', 'ALARM_DATE', 'LONGITUDE', 'LATITUDE']
      const ary = []
      ary.push(this.row)
      export2Excel(tHeader, filterVal, ary, excelName)
    },
    exportExcel () {
      let excelName = '报警信息'
      const tHeader = ['报警人员', '人员类型', '所属清扫队', '所属班组', '报警类型', '报警时间', '滞留时间']
      const filterVal = ['报警人员', '人员类型', '所属清扫队', '所属班组', '报警类型', '报警时间', '滞留时间']
      export2Excel(tHeader, filterVal, this.tableData, excelName)
    },
    // 分页导航
    handlePageChange (currentPage) {
      this.currentPage = currentPage;
      // console.log(this.currentPage)
      // this.$set(this.query, 'pageIndex', val);
      // this.getData();
    },
    handleSizeChange (size) {
      this.pageSize = size;
      console.log(this.pageSize)
    }
  }
}
</script>

<style scoped lang="less">
.warning_container {
  width: 100%;
  height: 100%;
  border-left: 4px solid #007acc;
}
.top_box {
  background-color: #fff;
  height: 36px;
  line-height: 30px;
  border-bottom: 2px solid #007acc;
  border-top: 2px solid #007acc;
  padding-left: 66px;
  display: flex;
  align-items: center;
  .iconfont {
    cursor: pointer;
  }
  .warning_title {
    margin: 0 auto;
    font-weight: bold;
    cursor: default;
  }
  .open_warning_details {
    float: right;
    margin-right: 10px;
    color: #666;
    cursor: pointer;
    &:hover {
      color: #007acc;
    }
  }
}

.warning_content {
  display: flex;
  height: calc(~'100% - 30px');
  .warning_contents {
    width: 100%;
    // overflow-x: hidden;
    // overflow-y: auto;
    .el-table {
      height: 100%;
      width: 100%;
    }
    /deep/.el-table__body-wrapper {
      height: calc(~'100% - 33px');
      overflow-y: auto;
    }
  }
}
.details {
  width: 600px;
  height: 400px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  position: fixed;
  z-index: 99;
}
.rowContextmenu {
  width: 100px;
  height: 78px;
  background-color: #f3f3f3;
  border: 1px solid #ccc;
  position: absolute;
  z-index: 999;
  span {
    display: block;
    text-align: center;
    line-height: 26px;
    font-size: 12px;
    cursor: default;
    &:hover {
      background-color: #007acc;
      color: #fff;
    }
  }
}
</style>
